<template>
  <!-- <pre></pre>  会保留所有的字符-->
  <div class="column-detail-page w-75 mx-auto" ref="s">
    <div
      class="column-info row mb-4 border-bottom pb-4 align-items-center"
      v-if="column"
    >
      <div class="col-3 text-center">
        <img
          :src="column.avatar && column.avatar.fitUrl"
          :alt="column.title"
          class="rounded-circle border w-100"
        />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
        <p class="text-muted">{{ column.description }}</p>
      </div>
    </div>
    <post-list :list="list"></post-list>
    <span ref="loadMoreRef" style="display:block">
      <!-- v-show="!ifIsLastPage"-->
      <!-- @click="loadMorePage" -->
    </span>
  </div>
</template>

<script lang="ts">
import { ref, computed, defineComponent, onMounted, watch } from "vue";
// 访问vuerouter 使用钩子函数useRoute 不是useRouter
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { GlobalDataProps, ColumnProps } from "../store";
import PostList from "../components/PostList.vue";
import { addColumnAvatar } from "../helper";
import useLoadMore from "../hooks/useLoadMore";

export default defineComponent({
  components: {
    PostList
  },

  setup() {
    const route = useRoute(); //调用钩子函数 useRoute
    const store = useStore<GlobalDataProps>(); //调用钩子函数 useStore
    // 拿到column的id 通过+将字符串类型转变成number
    // 为了让 computed 响应对应的变化，添加响应式对象
    const currentId = ref(route.params.id);
    onMounted(() => {
      store.dispatch("fetchColumn", currentId.value);
      store.dispatch("fetchPosts", { pageSize: 4, cid: currentId.value });
    });
    // 检测变化
    watch(
      () => route.params,
      toParams => {
        // 确保要变化的路径是进入到用户的专栏
        console.log(toParams, "//");
        if ((toParams && toParams.id) === store.state.user.column) {
          // 重新发送请求，在 store 中有对应的缓存设置
          store.dispatch("fetchColumn", toParams.id);
          store.dispatch("fetchPosts", { pageSize: 3, cid: toParams.id });
          // 重新赋值，这样 computed 会变化
          currentId.value = toParams.id;
        }
      }
    );
    // 通过 column 类型找到state中属于该类的所有文章
    const column = computed(() => {
      const selectColumn = store.getters.getColumnById(currentId.value) as
        | ColumnProps
        | undefined;
      if (selectColumn) {
        addColumnAvatar(selectColumn, 100, 100);
      }
      return selectColumn;
    });
    // 通过 post 中的类型来选择出所有的文章列表
    const list = computed(() => store.getters.getPostsByCId(currentId.value));
    // 增加useloadmore功能 还是得用computed包裹成响应式对象。。
    const total = computed(() =>
      store.getters.getLoadedColumnsTotalByCId(currentId.value)
    );
    const currentPage = computed(() =>
      store.getters.getLoadedColumnsCurrentPageByCId(currentId.value)
    );
    const options = {
      root: null,
      rootMargin: "100px 0px 100px 0px",
      threshold: [0.3]
    };
    const { loadMorePage, isLastPage } = useLoadMore(
      "fetchPosts",
      total,
      {
        pageSize: 3,
        currentPage: currentPage.value ? currentPage.value + 1 : 1
      },
      currentId.value
    );
    const io = new IntersectionObserver(
      (entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry: IntersectionObserverEntry) => {
          if (entry.isIntersecting) {
            loadMorePage();
            if (isLastPage.value) {
              loadMoreRef.value && io.unobserve(loadMoreRef.value);
            }
          }
        });
      },
      options
    );
    const loadMoreRef = ref<HTMLElement | null>(null);
    // 注意 onMount之后才能监听
    onMounted(() => {
      loadMoreRef.value && io.observe(loadMoreRef.value);
    });
    return {
      route,
      column,
      list,
      isLastPage,
      loadMoreRef
    };
  }
});
</script>
